<%@page import="com.jfinal.kit.PropKit"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<html>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>常用地址</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link href="../wx/css/bootstrap.min.css" rel="stylesheet">
    <link href="../wx/css/jquery-confirm.min.css" rel="stylesheet">
    <link href="../wx/css/font-awesome.min.css" rel="stylesheet">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="../wx/js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="../wx/js/bootstrap.min.js"></script>
    <script src="../wx/js/jquery-confirm.min.js"></script>
    <script src="../wx/js/address.js"></script>
    <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=X4JBZ-VMJKF-3SSJA-JMHTE-KLDKV-DRFIF"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <style type="text/css">
        html,body,section{
            width: 100%;
            height:100%;
            overflow: hidden;
        }
        section{
            display: none;
        }
        .container {
            width: 100%;
            padding-left: 0px;
        }
        .address-tab {
            background-color: #f8f8f8;
            border-color: #e7e7e7;
            margin-bottom: 0px;
        }
        .address-tab div{
            margin-top: 10px;
            font-size: 18px;
        }
        #common-address-tab{
            border-right: 1px solid #F00;
        }
        #address-list{
            height: 100%;
        }
        #common-address-list,#history-address-list{
            height: 85%;
            overflow-y: auto;
        }
        #address-list ul{
            margin-bottom: 0px;
        }

        .form-group{
            padding-left: 0px;
            padding-right: 5px;
            margin-top: 2px;
            margin-bottom: 2px;
        }
        .near-container{
            height: 50%;
            overflow-y:auto;
            margin-bottom: 0px;
            padding-bottom: 0px;
            scrollbar-face-color: #2D88FF;
        }
        #map-container{
            width:100%;
            height: 40%;
            margin-top: 0px;
            padding-top: 0px;
        }
        .near-locations li h5 p{
            padding-left: 20px;
        }
        .loading-mask {
            position: absolute;
            z-index: 1999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.5;
            text-align: center;
            display: none;
        }
        .loading-des {
            margin-top:50px;
            color: #fff;
        }

    </style>
</head>
<body>
<div class="container list-container">
    <div class="row">
        <nav class="navbar address-tab">
            <div id="common-address-tab" class="col col-xs-6 text-center navbar-link">
                <span class="text-primary">常用地址</span>
            </div>
            <div id="history-address-tab" class="col col-xs-6 text-center navbar-link">
                <span class="text-muted">历史记录</span>
            </div>
        </nav>
    </div>
</div>
<div class="container list-container" id="address-list">
    <div class="row" id="common-address-list">
        <ul class="list-group" id="common-address">
            <li class="list-group-item" cat="0">
                <i class="fa fa-2x fa-home pull-left text-danger fa-fw"></i>
                <h4>家庭
                    <span class="text-muted" id="homeUnset">
                    <small>未设置</small></span>
                    <input type="hidden" value=''id="setLng"> 
					<input type="hidden" value='' id="setLat">
                    <a href="javascript:void(0)" class="pull-right address-set">设置</a>
                </h4>
            </li>
            <li class="list-group-item" cat="1">
                <i class="fa fa-2x fa-building pull-left text-danger fa-fw"></i>
                <h4>单位
                    <span class="text-muted" id="compangUnset"><small>未设置</small></span>
                    <a href="javascript:void(0)" class="pull-right address-set">设置</a>
                </h4>
            </li>
        </ul>
    </div>
    <div class="row" id="history-address-list" hidden>
        <ul class="list-group" id="history-address"></ul>
    </div>
    <div class="row text-center" id="address-loading" style="margin-top: 0px;" hidden>
        <button type="button" class="btn btn-info btn-block">加载更多...</button>
    </div>
</div>

<section>
    <div class="container">
        <div class="row">
            <form class="form-inline col col-xs-12">
                <div class="form-group col col-xs-10">
                    <label class="sr-only" for="key-address">搜索地点</label>
                    <div class="input-group margin-bottom-sm">
                        <div class="input-group-addon" id="back"><i class="fa fa-angle-double-left"></i></div>
                        <input type="text" class="form-control" id="key-address" placeholder="搜索地点">
                        <div class="input-group-addon" id="clear"><i class="fa fa-remove"></i></div>
                    </div>
                </div>
                <div class="form-group col col-xs-2">
                    <button type="button" id="search" class="btn btn-primary btn-group-xs">
                        <i class="fa fa-search"></i> 搜索
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div id="map-container"></div>
    <div class="container near-container">
        <div class="row">
            <ul class="list-group near-locations"><li class="list-group-item"></li></ul>
        </div>
    </div>
    <nav class="navbar navbar-default navbar-fixed-bottom" id="nav-confirm" hidden>
        <div class="container" >
            <div class="row">
                <div class="text-center" >
                    <button type="button" id="btn-confirm" class="btn btn-primary" style="margin-top: 5px;" data-toggle="button" data-loading-text="Loading...">确定</button>
                </div>
            </div>
        </div>
    </nav>
    <div class="loading-mask" id="matte">
        <p class="loading-des">正在处理中...</p>
    </div>
    <input type="hidden" value="${appId }" id="appid">
	<input type="hidden" value="${nonceStr }" id="nonceStr">
	<input type="hidden" value="${timestamp }" id="timestamp">
	<input type="hidden" value="${url }" id="url">
	<input type="hidden" value="${signature }" id="signature">
	<input type="hidden" value="${jsapi_ticket }" id="jsapi_ticket">
	<input type="hidden" value="${openId }" id="openId">
	<input type="hidden" value="${address }" id="address">
	<input type="hidden" value="${address2 }" id="address2">
</section>
</body>
</html>